<template>
	<div>

		<div class="shop">			
			<swiper :options="swiperOption"  ref="mySwiper">  
	            <swiper-slide v-for="item in dylunbo.pics" key="$index">  
	            	<img :src="item.url60x60" />
	            </swiper-slide>   
	            <div class="swiper-pagination clos" slot="pagination"></div>  
	       </swiper>  		
		</div>
		<div class="diso">
			<p class="diso-1">{{dylunbo.name}}</p>
			<p class="diso-2 fo">{{dylunbo.subTitle}}</p>
			<p class="diso-3">￥{{dylunbo.price}}</p>
			<p class="diso-4"><span>已售：{{dylunbo.stockNum}}</span><span>库存：{{dylunbo.status}}</span></p>
		</div>
		<div class="choose">
			<span class="choose1">已选</span>
			<span class="choose1">1个</span>
			<span class="righ">&#xe649;</span>
		</div>
		<div class="send">
			<span class="send-1">送至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe648;</span>
			<span class="righ">&#xe649;</span>
			<span class="send-2">北京&nbsp;&nbsp;北京市&nbsp;&nbsp;昌平区</span>
		</div>
		<div class="talk">
			<p class="p-talk"><span class="talk-1">商品评价(160)</span><span class="talk-2">好评度</span>&nbsp;&nbsp;<span class="col">99%</span><span class="righ">&#xe649;</span></p>
			<div class="talk-top">
				<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
				<p class="talk-top2">不错，日期新鲜。给孩子吃，作为奖励。包邮的活动挺好的。</p>
				<p class="talk-top3">
					<img src="/static/market-img/1503321058946_3922_19854.jpg"/>
					<img src="/static/market-img/1503321062905_1645_19858.jpg"/>
					
				</p>
			</div>
			<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
			<div class="last-talk">
				<p class="talk-top1"><span class="orange">&#xe607;&#xe607;&#xe607;&#xe607;&#xe607;</span><span class="nums">1376****430</span></p>
				<p>孩子喜欢</p>
			</div>
			<p class="lastone">查看全部评价</p>
		</div>
		<div class="dyshop">
			<div class="pto1" v-for="i in dyjianguo" key="$index">
				<p><img :src="i.url300x300"/></p>
				<p class="d-m1">{{i.mpName}}</p>
				<p class="d-m2 d-null"></p>
				<p class="d-p">￥{{i.marketPrice}}</p>
				<p class="d-pin"><span class="d-p">{{i.commentInfo.commentNum}}</span><span>条评论</span>&nbsp;&nbsp;<span>好评</span><span class="d-p">{{i.commentInfo.goodRate}}%</span><span class="d-img d-img-cart">&#xe6f0;</span></p>
			</div>
			
		</div>
	</div>
</template>
<script type="text/javascript">
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default{
		components: {
		    swiper,
		    swiperSlide
		},
		data(){
			return {
					dylunbo:[],
					dyjianguo:[],
					//设置swiper配置参数
					swiperOption: {
			            autoplay: 1000,
			            loop:true,
			            loopedSlides:4,
			            pagination : '.swiper-pagination',
					}
			}
		},
		computed:{
			addgf(){
				return this.$store.state.footId
			}
		},
		methods:{
			// addgf(){
			// 	return this.$store.state.footId
			// },
			requests(add){
				this.$http({
					url:"http://m.laiyifen.com/api/product/baseInfo",
					// method:'get',
					params:{
						areaCode:110114,
						platformId:3,
						mpsIds:add
					}
				}).then(function(res){
					console.log(res)
					this.dylunbo=res.body.data[0]
				})	
			},
			red(){
				this.$http({
					url:"http://m.laiyifen.com/api/search/searchList?ut=false&companyId=30&shoppingGuideJson=%7B%22attributeJson%22%3A%5B%5D%7D&brandIds=&promotionIds=&coverProvinceIds=&sortType=10&filterType=&priceRange=&pageNo=1&pageSize=20&platformId=3&areaCode=110114&navCategoryIds=1006024900000013",
					method:"get",					
				}).then(function(res){
					console.log(res);
					this.dyjianguo=res.body.data.productList;
					console.log(this.dyjianguo);
				})
			}
		},
		mounted(){
			this.requests(this.addgf);
			this.red();
			console.log(this.addgf)
		}

	}
</script>
<style type="text/css" scoped>
	/*轮播图*/
	.shop img{
		width: 100%;	
	}
	/*迪士尼qq果冻*/
	.diso,.send{
		padding: 0.375rem;
		border-bottom: .2rem solid #DDDDDD;
	}

	.diso .diso-2{
	}
	.diso-2{
		color:#f44 ;
		padding-top: 0.1875rem;
		/*font-size: 14px;*/
	}
	.diso-3{
		color: #FF6900;
		font-weight: 700;
		padding: .2rem 0;
		font-size: 18px;
	}
	.diso-4 span{
		color:#666;
		font-size:16px ;
	}
	.diso-4 span:first-of-type{
		margin-right: 2.5rem;
	}
	/*已选*/
	.choose{
		padding: 0.375rem;
		border-bottom: .2rem solid #DDDDDD;
	}
	.choose span{
		color:#666;
		font-size:16px;
	}
	.choose span:nth-of-type(2){
		margin-left: .8rem;
		
	}
	.choose .choose1{
		font-size: 16px;
	}
	.send .righ{
		font-size: 40px;
	}
	.choose .righ{
		font-size: 40px;
		float: right;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.eot');
	  src: url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_8bwqgqyqgy8yf1or.svg#iconfont') format('svg');
	}
	.righ{
		font-family: 'iconfont';
		float: right;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.eot');
	  src: url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_etgiakr3219n3ik9.svg#iconfont') format('svg');
	}
	.send-1{
		font-family: 'iconfont';
		color: #FF6900;
	}
	.send span{
		font-size: 16px;
	}
	.send-2{
		color: #666666;
	}
	/*商品评价*/
	.talk{
		padding: 0.375rem;
		/*margin-bottom: 1.48rem;*/
	}
	.talk .p-talk{
		border-bottom: 1px solid #DDDDDD;
		padding: 0 0 .375rem;
	}
	.talk-1{
		color: #666666;
		font-size: 16px;
	}
	.talk-2{
		margin-left: 3.5rem;
		font-size: 14px;
	}
	.talk .righ{
		font-size: 40px;
	}
	.col{
		color: #FF6900;
		font-size: 16px;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.eot');
	  src: url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_dsw3i0t4vsdr6bt9.svg#iconfont') format('svg');
	}
	.orange{
		font-family: 'iconfont';
		color: #FF6900;
		font-size: 14px;
	}
	.last-talk .talk-top1{
		padding:0;
		border-bottom: 0;
	}
	.talk-top1,.talk-top2,.talk-top{
		padding: .375rem 0 .375rem 0;
		border-bottom: 1px solid #DDDDDD;
	}
	.talk-top2{
		font-size: 14px;
		color: #666666;
	}
	.talk-top3 img{
		width: 1.6875rem;
		height: 1.6875rem;
		padding: .375rem 0 0 0;
	}
	.talk-top3 img:first-of-type{
		margin-right:.5rem ;
	}
	.nums{
		float: right;
	}
	.last-talk{
		padding: .375rem 0;
	}
	.last-talk{
		padding: .375rem 0;	
	}
	.last-talk p:nth-of-type(2){
		border-bottom: 1px solid #DDDDDD;
		padding: .375rem 0;
		font-size: 16px;
	}
	.lastone{
		padding: 0 3rem ;
		font-size:16px ;
	}

	/*猜你喜欢*/
	.other{
		background: #ebeced;
		padding: .375rem;
	}
	.other span{
	    background: #f0f0f0;
	    text-align: center;
	    font-size: 14px;
	   	margin-left: 3.5rem;
	}

	.i{
		font-style: normal;
		color: #FF6600;
	}
	.other-two{
		font-family: 'iconfont';
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot');
	  src: url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_vt5lax3uprkbuik9.svg#iconfont') format('svg');
	}


	/*商品展示*/
	 .dyshop{
	 	background: #ebeced;
	 	display: flex;
	 	justify-content: space-around;
	 	flex-wrap: wrap;
	 	padding: 0.1875rem 0.140625rem;
	 	margin-bottom: 2rem;
	 }
	.dyshop div{
		background: white;
		width: 45%;   
		padding-left: .3rem;
	}
	.dyshop .pto1,.dyshop .pto2{
		border-bottom: .3rem solid #ebeced;	
	}
	.dyshop .pto2{
		/*margin-right: .2rem;*/
	}
	.d-m1{
		overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    font-size: .4rem;
	    width: 3rem;
	}
	.dyshop div p:first-of-type{
		padding-bottom: 0.2rem;
	}
	.d-m2 img{
		width: .7rem;
	    margin-top: .1rem;
	}
	.d-null{
		height:0.5rem ;
		margin-top: .1rem;
	    line-height: 0.5rem;
	}
	.d-p{
		 color: #ff6900;
		 font-size: 0.4rem;
	}
	.d-pin{
		color:#999 ;
		padding: .1rem 0 .3rem 0;
	}
	.d-img{
		font-family: 'iconfont';
		color:#ff6900;
		font-size: .75rem;
		margin-left: 1.7rem;

	}  
	.d-img-cart{
		margin-left: 0;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot');
	  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.svg#iconfont') format('svg');
	}


	.diso-1{
		font-size:40px;
	}
</style>